/* eslint-disable @typescript-eslint/ban-ts-comment */
import React, { useEffect, useState } from 'react';
import Strings from '@/i18n';
import { useProps } from '@ray-js/panel-sdk';
import { publishDps, router, showToast, Text, View, ScrollView, Image } from '@ray-js/ray';
import { NavBarCustom } from '@/components/NavBarCustom';
import { Cell, Checkbox, Switch, Icon, BottomSheet } from '@ray-js/smart-ui';
import clsx from 'clsx';
import styles from './index.module.less';
import { decodeCycleTimer, decodeNormalTimer } from '@/utils/timer';
import { useSwitchInfo } from '@/hooks/useSwitchInfo';
import TimeList from './TimeList';

import Res from '@/res/images';
import useHandleJump from '@/hooks/useHandleJump';
import { getCachedSystemInfo } from '@/api/getCachedSystemInfo';
import { useWaterControlInfo } from '@/hooks/useWaterControlInfo';

const { safeArea } = getCachedSystemInfo();

const { height } = safeArea;

export const decodeArea = (area: string) => {
  // 将十六进制字符串转换为8位二进制字符串
  const binary = parseInt(area, 16).toString(2).padStart(8, '0');
  return binary.split('').reverse().join('');
};

// 添加encodeArea方法，将8位二进制字符串转换为十六进制字符串
export const encodeArea = (binary: string) => {
  // 将二进制字符串转换为2位十六进制字符串
  return parseInt(binary, 2).toString(16).padStart(2, '0');
};

const Setting: React.FC = () => {
  const {
    smart_switch: smartSwitch,
    general_timing: generalTiming,
    cycle_timing1: cycleTiming1,
    cycle_timing2: cycleTiming2,
  } = useProps();

  const groupInfo = useWaterControlInfo();

  const dpsInfo = groupInfo.reduce((prev, cur) => [...prev, cur.water, cur.drug], []);

  const [showAddBtn, setShowAddBtn] = useState(false);

  const handleJump = useHandleJump();
  const normalDataSource = decodeNormalTimer(generalTiming, true, dpsInfo);
  const cycleDataSource1 = decodeCycleTimer(cycleTiming1, true, dpsInfo);
  const cycleDataSource2 = decodeCycleTimer(cycleTiming2, true, dpsInfo);

  const cycleDataSource = [...cycleDataSource1, ...cycleDataSource2];

  return (
    <View className={styles.view}>
      <NavBarCustom name={Strings.getLang('time')} back />
      <View className={styles.container}>
        {normalDataSource.length || cycleDataSource.length ? (
          <ScrollView
            className={styles.scrollView}
            scrollY
            style={{
              height: `calc(${height}px - 100px - (env(safe-area-inset-bottom) /  2) )`,
            }}
          >
            {!!normalDataSource.length && (
              <TimeList
                dataSource={normalDataSource}
                type="normal"
                dpsInfo={dpsInfo}
                anotherSource={cycleDataSource}
              />
            )}
            {!!cycleDataSource.length && (
              <TimeList
                dataSource={cycleDataSource}
                type="cycle"
                dpsInfo={dpsInfo}
                anotherSource={normalDataSource}
              />
            )}
          </ScrollView>
        ) : (
          <View className={styles.empty}>
            <Image src={Res.empty} className={styles.emptyImage} />
            <Text className={styles.emptyText}>{Strings.getLang('no_time')}</Text>
          </View>
        )}
        <View className={styles.addBtn} onClick={() => setShowAddBtn(true)}>
          <Image src={Res.add} className={styles.addImg} />
        </View>
      </View>

      <BottomSheet
        show={showAddBtn}
        title="添加定时"
        onClose={() => setShowAddBtn(false)}
        showClose={false}
      >
        <Cell
          title={Strings.getLang('normalTime')}
          label={Strings.getLang('normal_info')}
          slot={{
            icon: (
              <View className={styles.iconBox}>
                <Image src={Res.commontimer} className={styles.timerIcon} />
              </View>
            ),
          }}
          onClick={() => {
            handleJump('addNormal');
            setShowAddBtn(false);
          }}
        />
        <Cell
          title={Strings.getLang('cycleTime')}
          label={Strings.getLang('cycle_info')}
          slot={{
            icon: (
              <View className={styles.iconBox}>
                <Image src={Res.looptimer} className={styles.timerIcon} />
              </View>
            ),
          }}
          onClick={() => {
            handleJump('addCircle');
            setShowAddBtn(false);
          }}
        />
      </BottomSheet>
    </View>
  );
};

export default Setting;
